import { ElMessage } from "element-plus";
import { getAppList, deleteApp } from "@/api/vap/cluster";
import { reactive, ref, onMounted } from "vue";

export function useApp() {
  const dialogFormAddRef = ref();

  const form = reactive({
    name: ""
  });
  const dataList = ref([]);
  const loading = ref(true);

  const columns: TableColumnList = [
    {
      type: "selection",
      width: 55,
      align: "left",
      hide: ({ checkList }) => !checkList.includes("勾选列")
    },
    {
      label: "序号",
      type: "index",
      minWidth: 70,
      hide: ({ checkList }) => !checkList.includes("序号列")
    },
    {
      label: "应用名称",
      prop: "appIssue.appName",
      align: "left"
    },
    {
      label: "应用别名",
      prop: "appIssue.alias",
      align: "left"
    },
    {
      label: "执行文件路径",
      prop: "appIssue.execPath",
      align: "left"
    },
    {
      label: "应用参数",
      prop: "appIssue.appParams",
      align: "left"
    },
    {
      label: "所属集群",
      prop: "cluster.name",
      align: "left"
    },
    {
      label: "应用属性",
      prop: "status",
      cellRenderer: ({ row, props }) => (
        <div>
          <el-tag
            style="margin-left: 5px;"
            size={props.size}
            type={row.appIssue.isSingle ? "danger" : "success"}
            effect="plain"
          >
            {row.appIssue.isSingle ? "单例" : "共享"}
          </el-tag>
          <el-tag
            style="margin-left: 5px;"
            size={props.size}
            type={row.appIssue.isPublic ? "danger" : "success"}
            effect="plain"
          >
            {row.appIssue.isPublic ? "全局" : "非全局"}
          </el-tag>
          <el-tag
            style="margin-left: 5px;"
            size={props.size}
            type={row.appIssue.isAdmin ? "danger" : "success"}
            effect="plain"
          >
            {row.appIssue.isAdmin ? "管理员权限" : "一般权限"}
          </el-tag>
        </div>
      )
    },
    {
      label: "操作",
      fixed: "right",
      slot: "operation"
    }
  ];

  function handleDelete(row) {
    console.log(row);
    deleteApp(row.appIssue.id).then(() => {
      onSearch();
    });
  }
  function handleUpdate(row: any) {
    console.log("handleUpdate", row);
    ElMessage({
      message:
        "非核心业务，你可以去【集群】模块中操作，独立出来的我还没写~(*^_^*)",
      type: "warning"
    });
    //userFormRef.value.showdialogForEditUser(row, "更新用户信息");
  }
  function handleSelectionChange(val) {
    console.log("handleSelectionChange", val);
  }
  function resetForm(formEl) {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
  }

  async function onSearch() {
    loading.value = true;
    const list = await getAppList(form.name);
    dataList.value = list;
    setTimeout(() => {
      loading.value = false;
    }, 500);
  }

  onMounted(() => {
    onSearch();
  });

  return {
    dialogFormAddRef,
    form,
    dataList,
    loading,
    columns,
    handleDelete,
    handleUpdate,
    onSearch,
    resetForm,
    handleSelectionChange
  };
}
